<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>


<head>
	<meta charset="utf-8">
	<meta name="author" content="Kodinger">
	<title>注册页面</title>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/my-login.css">
</head>
<body class="my-login-page" >
	<section class="h-100" >
		<div class="container h-100">
			<div class="row justify-content-md-center h-100">
				<div class="card-wrapper">
					<div class="brand">
						<img src="img/logo.jpg">
					</div>
					<div class="card fat" >
						<div class="card-body">
							<h4 class="card-title" style="text-align: center;">注册</h4>
							<form action="?"  method="post" enctype="multipart/form-data" >
							  									
								<div class="form-group">
									<label for="name">姓名</label>
									<input id="name" type="text" class="form-control" name="name" required autofocus>
								</div>
								<div class="form-group">
									<label for="email">邮箱</label>
									<input id="email" type="email" class="form-control" name="email" required>
								</div>
									<div class="form-group">
									<label for="password">密码</label>
									<input id="password" type="password" class="form-control" name="password" required data-eye>
								</div>
								<div class="form-group">
								
									<label for="img">头像</label>								
									<input type="file" name="img" id="doc" onchange="showImage();"/>
									<div id="localImag">
                   						 <img id="preview" width=-1 height=-1 style="diplay:none" />
              					  </div>					
								</div>							
	
							
								<div class="form-group">
									
								性别:<input id="name" type="radio" name="sex" value="男">男
									<input id="name" type="radio" name="sex" value="女">女
								</div>
									<div class="margin-top5 text-center">
									<a href="registerDoctor.jsp">医护人员注册</a>
								</div>
								<div class="form-group no-margin" style="margin-top: 10px;">
									<button type="submit" class="btn btn-primary btn-block">
										注册
									</button>
								</div>

								<div class="margin-top20 text-center">
									是否已有账号 <a href="login.jsp">登录</a>
								</div>
							</form>
						</div>
					</div>
					
				</div>
			</div>
		</div>
	</section>
	<script type="text/javascript">
    function showImage() {
        var docObj = document.getElementById("doc");
        var imgObjPreview = document.getElementById("preview");
        if (docObj.files && docObj.files[0]) {
            //火狐下，直接设img属性  
            imgObjPreview.style.display = 'block';
            imgObjPreview.style.width = '300px';
            imgObjPreview.style.height = '120px';
            //imgObjPreview.src = docObj.files[0].getAsDataURL();  
            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式  
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        } else {
            //IE下，使用滤镜  
            docObj.select();
            var imgSrc = document.selection.createRange().text;
            var localImagId = document.getElementById("localImag");
            //必须设置初始大小  
            localImagId.style.width = "250px";
            localImagId.style.height = "200px";
            //图片异常的捕捉，防止用户修改后缀来伪造图片 
            try {
                localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                localImagId.filters
                        .item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            } catch (e) {
                alert("您上传的图片格式不正确，请重新选择!");
                return false;
            }
            imgObjPreview.style.display = 'none';
            document.selection.empty();
        }
        return true;
    }
</script>

	<script src="js/jquery.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="js/my-login.js"></script>
</body>
</html>